<template>
  <div id="back">
    <div id="header">
      <div id="title">
        <p style="test-align:left;font-size:20px;margin-top: auto">**养老院</p>
      </div>
      <div id="contain-url">
        <router-link to='/components/User/InfoManager'>
          <span style="text-align:center;font-size: 20px; color:black;">{{object.name}},您好~</span>
        </router-link>
      </div>
    </div>

    <div class="container">
      <br>
      <p style="font-size:17px;color:white;text-align:left;">●护工评价</p>
      <div class = "icon" onmouseover="this.className='icon_selected'" onmouseout="this.className='icon'"
        onclick="window.location.href='/components/User/Assess/Evaluate'">
        <img src="@/assets/打分评价.png" style="width: 80%"/>
        <p>打分评价</p>
      </div>
      <div class = "icon" onmouseover="this.className='icon_selected'" onmouseout="this.className='icon'"
           onclick="window.location.href='/components/User/Assess/ChangeNurse'">
        <img src="@/assets/更换护工.png" style="width: 80%"/>
        <p>更换护工</p>
      </div>
      <div class = "icon" onmouseover="this.className='icon_selected'" onmouseout="this.className='icon'"
           onclick="window.location.href='/components/User/Assess/LeaveWord'">
        <img src="@/assets/留言评论.png" style="width: 80%"/>
        <p>留言评论</p>
      </div>
      <div class = "icon" onmouseover="this.className='icon_selected'" onmouseout="this.className='icon'"
           onclick="window.location.href='/components/User/Assess/AccuseNurse'">
        <img src="@/assets/护工举报.png" style="width: 80%"/>
        <p>护工举报</p>
      </div>

      <br><br><br><br><br><br><br><br>
      <p style="font-size:17px;color:white;text-align:left;">●预约请求</p>
      <div class = "icon" onmouseover="this.className='icon_selected'" onmouseout="this.className='icon'">
        <img src="@/assets/预约入住.png" style="width: 80%"/>
        <p>预约入住</p>
      </div>
      <div class = "icon" onmouseover="this.className='icon_selected'" onmouseout="this.className='icon'">
        <img src="@/assets/预约探望.png" style="width: 80%"/>
        <p>预约探望</p>
      </div>

      <br><br><br><br><br><br><br><br>
      <p style="font-size:17px;color:white;text-align:left;">●膳食需求</p>
      <div class = "icon" onmouseover="this.className='icon_selected'" onmouseout="this.className='icon'">
        <img src="@/assets/膳食口味.png" style="width: 80%"/>
        <p>膳食口味选择</p>
      </div>
      <div class = "icon" onmouseover="this.className='icon_selected'" onmouseout="this.className='icon'"
           onclick="window.location.href='/components/User/Food/KindSelect'">
        <img src="@/assets/膳食种类.png" style="width: 80%"/>
        <p>膳食种类选择</p>
      </div>
      <br><br><br><br><br><br><br><br>
      <p style="font-size:17px;color:white;text-align:left;">●护理</p>
      <div class = "icon" onmouseover="this.className='icon_selected'" onmouseout="this.className='icon'">
        <img src="@/assets/护理等级.png" style="width: 80%"/>
        <p>护理等级</p>
      </div>
      <br><br><br><br><br><br><br><br><br><br><br><br>

    </div>

  </div>


</template>

<script>
export default {
  name: "User",
  data(){
    return{
      object : JSON.parse(this.$route.query.obj)
    }
  },
  methods:{
    toAssess(){
      this.$router.push("/Evaluate")
    }
  }
}

</script>

<style scoped>
.icon{
  background: white;
  width: 6%;
  height: auto;
  margin-left: 40px;
  float: left;
  background: rgba(0, 0, 0, 0);
  color:white;
  font-size: 14px;
}
.icon_selected{
  background: white;
  width: 6%;
  height: auto;
  margin-left: 40px;
  float: left;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  color:white;
}
#header{
  width: 100%;
  height: 30px;
  background: #4bcafa
;
}
#title{
  background:#4bcafa;
  width:200px;
  height: 30px;
  float: left;
}
#contain-url{
  width: 200px;
  height: 30px;
  background: #4bcafa;
  margin-left: 80%;
}
.container{
  width: 80%;
  height: auto;
  background: white;
  margin-left: 10%;
  margin-top: 30px;
  /*opacity: 0.3;*/
  background: rgba(0, 0, 0, 0.3);
  overflow-y: scroll;
  max-height:80%;
}

#back{
  background:url("http://cdn-dlut.supwisdom.com/student/static/common-home/img/theme1.jpg");
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
  z-index: -1;
  position: fixed;
  top: 0px; /*这里是设置与顶部的距离*/
  left: 0px; /*这里是设置与左边的距离*/
  bottom: 0px;
  right: 0px;

}


</style>